<template>
	<view class="content">
		<view class="text">
			<view class="left">
				订单编号:
			</view>
			<view class="right">
				{{data.orderSn}}
			</view>
		</view>
		<view class="text">
			<view class="left">
				订单金额:
			</view>
			<view class="right">
				{{data.totalAmount}}元
			</view>
		</view>

		<view class="xz">
			选择支付方式

			<view class="zfb">
				<view class="text">
					<image src="/static/icons/alipay.png" mode=""></image>

					<view>
						支付宝支付
					</view>
				</view>
				<evan-radio v-model="baseValue" label="1"></evan-radio>
			</view>
			<view class="wx">
				<view class="text">
					<image src="/static/icons/wxpay.png" mode=""></image>
					<view>
						微信支付
					</view>
				</view>
				<evan-radio v-model="baseValue" label="2"></evan-radio>
			</view>
		</view>

		<view class="button">
			<view class="btn" @tap="ok">
				立即支付
			</view>
			<view class="xy">
				<view class="a">
					点击立即支付，即代表您同意
				</view>
				<view class="b">
					《条款协议》
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPreOrderById,
		payConfirm
	} from "@/api/Detail/index.js"
	export default {
		data() {
			return {
				baseValue: '1',
				data: {},
				orderId:''
			}
		},
		onLoad(a) {
			this.orderId = a.orderId
			getPreOrderById(a.orderId).then(res => {
				console.log(res)
				this.data = res.data.orderBase
			})
		},
		methods: {
			ok() {
				payConfirm({
					orderId: this.orderId,
					payType: ~~this.baseValue
				}).then(res => {
					console.log(res)
					if(res.success){
						uni.showToast({
						    title: '支付成功',
						    duration: 2000
						});
						setTimeout(()=>{
							uni.switchTab({
								url: `/pages/mine/mine`
							})
						},1000)
					}else{
						uni.showToast({
						    title: `${res.message}`,
							icon:'none',
						    duration: 2000
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	image {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}

	.content {
		padding: 40rpx;

		.text {
			display: flex;
			font-size: 32rpx;
			height: 80rpx;
			line-height: 80rpx;

			.left {
				color: #7d7d7d;
				margin-right: 30rpx;
			}
		}

		.xz {
			margin-top: 30rpx;

			.zfb {
				display: flex;
				// height: 100rpx;
				// line-height: 100rpx;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;
			}

			.wx {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;
			}
		}
	}

	.button {
		margin-top: 100rpx;

		.btn {
			width: 500rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 80rpx;
			margin: 0 auto;
			color: #fff;
			text-align: center;
			background-color: #354e44;
		}

		.xy {
			// text-align: center;
			font-size: 24rpx;
			display: flex;
			justify-content: center;
			margin-top: 20rpx;
			color: #999;

			.b {
				color: #5a9ef7;
			}
		}
	}
</style>
